<template>
  <view class="container">
    <!-- 加载状态 -->
    <view class="loading-container" v-if="loading">
      <image src="/static/loading.png" class="loading-image"></image>
      <text class="loading-text">加载中...</text>
    </view>

    <!-- 错误状态 -->
    <view class="error-container" v-else-if="error">
      <image src="/static/error.png" class="error-image"></image>
      <text class="error-text">{{errorMsg}}</text>
      <button class="retry-btn" @click="loadHotelDetail">重试</button>
    </view>

    <!-- 内容区域 -->
    <block v-else>
      <!-- 轮播图 -->
      <swiper class="hotel-banner" circular :indicator-dots="true" :autoplay="true" :interval="4000" duration="500">
        <swiper-item v-for="(image, index) in hotel.images" :key="index">
          <image :src="image" mode="aspectFill" class="banner-image"></image>
        </swiper-item>
      </swiper>

      <!-- 基本信息 -->
      <view class="hotel-info-container">
        <view class="hotel-name-section">
          <text class="hotel-name">{{hotel.name}}</text>
          <view class="hotel-tags">
            <text class="tag" v-for="(tag, index) in hotel.tags" :key="index">{{tag}}</text>
          </view>
          <view class="rating-row">
            <text class="rating-score">{{hotel.rating}}分</text>
            <text class="rating-desc">{{getRatingDesc(hotel.rating)}}</text>
            <text class="review-count">{{hotel.reviewCount}}条点评</text>
          </view>
        </view>

        <!-- 地址与联系方式 -->
        <view class="hotel-contact">
          <view class="contact-row" @click="openLocation">
            <image src="/static/location.png" class="contact-icon"></image>
            <text class="contact-text">{{hotel.address}}</text>
            <text class="action-text">导航</text>
          </view>
          <view class="contact-row" @click="makePhoneCall">
            <image src="/static/phone.png" class="contact-icon"></image>
            <text class="contact-text">{{hotel.phone}}</text>
            <text class="action-text">拨打</text>
          </view>
        </view>
        
        <!-- 价格与预订 -->
        <view class="booking-section">
          <view class="price-info">
            <text class="price-label">价格</text>
            <text class="price-value">¥<text class="price-num">{{hotel.price}}</text>起</text>
          </view>
          <button class="booking-btn" @click="bookHotel">立即预订</button>
        </view>

        <!-- 酒店介绍 -->
        <view class="section">
          <view class="section-header">
            <text class="section-title">酒店介绍</text>
          </view>
          <view class="section-content">
            <text class="hotel-description">{{hotel.description}}</text>
          </view>
        </view>

        <!-- 设施与服务 -->
        <view class="section">
          <view class="section-header">
            <text class="section-title">设施与服务</text>
          </view>
          <view class="section-content">
            <view class="facilities-grid">
              <view class="facility-item" v-for="(facility, index) in hotel.facilities" :key="index">
                <image :src="facility.icon" class="facility-icon"></image>
                <text class="facility-name">{{facility.name}}</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 房型列表 -->
        <view class="section">
          <view class="section-header">
            <text class="section-title">房型列表</text>
          </view>
          <view class="section-content">
            <view class="room-list">
              <view class="room-item" v-for="(room, index) in hotel.rooms" :key="index">
                <image :src="room.image" class="room-image" mode="aspectFill"></image>
                <view class="room-info">
                  <text class="room-name">{{room.name}}</text>
                  <text class="room-size">{{room.size}}㎡ | {{room.bedType}}</text>
                  <view class="room-features">
                    <text class="room-feature" v-for="(feature, fIndex) in room.features" :key="fIndex">{{feature}}</text>
                  </view>
                  <view class="room-price-row">
                    <text class="room-price">¥{{room.price}}</text>
                    <button class="room-book-btn" @click.stop="bookRoom(room)">预订</button>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>

        <!-- 用户评论 -->
        <view class="section">
          <view class="section-header">
            <text class="section-title">用户评论 ({{hotel.reviews.length}})</text>
          </view>
          <view class="section-content">
            <view class="review-list">
              <view class="review-item" v-for="(review, index) in hotel.reviews" :key="index">
                <view class="reviewer-info">
                  <image :src="review.userAvatar" class="reviewer-avatar"></image>
                  <view class="reviewer-details">
                    <text class="reviewer-name">{{review.userName}}</text>
                    <text class="review-date">{{review.date}}</text>
                  </view>
                  <text class="review-rating">{{review.rating}}分</text>
                </view>
                <text class="review-content">{{review.content}}</text>
                <view class="review-images" v-if="review.images && review.images.length > 0">
                  <image 
                    v-for="(img, imgIndex) in review.images" 
                    :key="imgIndex" 
                    :src="img" 
                    class="review-image" 
                    mode="aspectFill"
                    @click="previewImage(review.images, imgIndex)">
                  </image>
                </view>
              </view>
            </view>
            
            <!-- 查看更多评论 -->
            <view class="more-reviews" v-if="hotel.reviews.length > 3">
              <text @click="viewMoreReviews">查看更多评论 ></text>
            </view>
          </view>
        </view>
        
        <!-- 底部空白区域，避免被底部交互栏遮挡 -->
        <view class="bottom-space"></view>
      </view>
      
      <!-- 底部固定互动栏 -->
      <view class="fixed-interaction-bar">
        <view class="interaction-item" @click="toggleCollect">
          <image :src="hotel.isCollected ? '/static/collected.png' : '/static/collect.png'" class="icon"></image>
          <text>{{hotel.isCollected ? '已收藏' : '收藏'}}</text>
        </view>
        <view class="interaction-item" @click="share">
          <image src="/static/share.png" class="icon"></image>
          <text>分享</text>
        </view>
        <view class="interaction-item" @click="viewReviews">
          <image src="/static/review.png" class="icon"></image>
          <text>评价</text>
        </view>
        <button class="quick-book-btn" @click="bookHotel">立即预订</button>
      </view>
    </block>
  </view>
</template>

<script>
export default {
  data() {
    return {
      hotelId: '',
      loading: true,
      error: false,
      errorMsg: '加载失败，请重试',
      hotel: {
        id: '1',
        name: '沙扒湾海景度假酒店',
        images: ['/static/图片.jpg', '/static/图片.jpg', '/static/图片.jpg'],
        tags: ['海景', '度假', '含早'],
        rating: 4.7,
        reviewCount: 862,
        address: '沙扒湾海滨大道128号',
        phone: '0662-12345678',
        price: 388,
        isCollected: false,
        description: '沙扒湾海景度假酒店位于美丽的沙扒湾海滨大道128号，距离著名的沙扒湾沙滩仅有5分钟步行路程。酒店设有室外泳池、健身中心和餐厅。每间客房均配有空调、平面电视和私人卫生间。部分客房还设有阳台，可欣赏海景。酒店提供免费WiFi和免费停车场。',
        facilities: [
          { name: '免费WiFi', icon: '/static/wifi.png' },
          { name: '停车场', icon: '/static/parking.png' },
          { name: '健身房', icon: '/static/gym.png' },
          { name: '泳池', icon: '/static/pool.png' },
          { name: '餐厅', icon: '/static/restaurant.png' },
          { name: '空调', icon: '/static/ac.png' },
          { name: '24小时前台', icon: '/static/reception.png' },
          { name: '行李寄存', icon: '/static/luggage.png' }
        ],
        rooms: [
          {
            id: 'r1',
            name: '标准双床房',
            image: '/static/图片.jpg',
            size: 35,
            bedType: '双床',
            price: 388,
            features: ['免费WiFi', '有窗', '独立卫浴', '2份早餐']
          },
          {
            id: 'r2',
            name: '豪华海景大床房',
            image: '/static/图片.jpg',
            size: 45,
            bedType: '大床',
            price: 588,
            features: ['免费WiFi', '海景阳台', '独立卫浴', '2份早餐']
          },
          {
            id: 'r3',
            name: '家庭套房',
            image: '/static/图片.jpg',
            size: 65,
            bedType: '大床+双床',
            price: 788,
            features: ['免费WiFi', '客厅', '独立卫浴', '4份早餐']
          }
        ],
        reviews: [
          {
            id: 'rev1',
            userName: '旅行爱好者',
            userAvatar: '/static/avatar.png',
            date: '2023-08-15',
            rating: 4.8,
            content: '酒店的位置非常好，从阳台能直接看到海。服务也很贴心，早餐品种丰富。房间干净整洁，设施也很新。强烈推荐！',
            images: ['/static/图片.jpg', '/static/图片.jpg']
          },
          {
            id: 'rev2',
            userName: '商务旅客',
            userAvatar: '/static/avatar.png',
            date: '2023-08-10',
            rating: 4.5,
            content: '酒店环境不错，服务态度很好。就是房间隔音稍微差了点，但整体来说很满意，会再次入住。',
            images: []
          },
          {
            id: 'rev3',
            userName: '度假一族',
            userAvatar: '/static/avatar.png',
            date: '2023-08-05',
            rating: 4.9,
            content: '非常完美的度假体验！泳池很干净，早餐很丰富，工作人员也很热情。距离海滩很近，周边有很多美食和小店。',
            images: ['/static/图片.jpg']
          }
        ]
      }
    }
  },
  onLoad(options) {
    if (options.id) {
      this.hotelId = options.id;
      this.loadHotelDetail();
    }
    
    // 设置分享参数
    uni.showShareMenu({
      withShareTicket: true,
      menus: ['shareAppMessage', 'shareTimeline']
    });
  },
  methods: {
    // 加载酒店详情
    loadHotelDetail() {
      this.loading = true;
      this.error = false;
      
      setTimeout(() => {
        // 实际项目中应该从API获取数据
        this.loading = false;
      }, 800);
    },
    
    // 获取评分描述
    getRatingDesc(rating) {
      if (rating >= 4.7) return '极好';
      if (rating >= 4.3) return '很好';
      if (rating >= 4.0) return '不错';
      if (rating >= 3.5) return '一般';
      return '较差';
    },
    
    // 收藏酒店
    toggleCollect() {
      if (!this.checkLogin()) return;
      
      this.hotel.isCollected = !this.hotel.isCollected;
      uni.showToast({
        title: this.hotel.isCollected ? '收藏成功' : '已取消收藏',
        icon: 'none'
      });
      
      // 实际项目中应调用API更新收藏状态
    },
    
    // 分享
    share() {
      uni.showToast({
        title: '点击右上角分享给好友',
        icon: 'none'
      });
    },
    
    // 查看评论
    viewReviews() {
      // 实际项目中可跳转到单独的评论页面
      uni.showToast({
        title: '查看全部点评',
        icon: 'none'
      });
    },
    
    // 预订酒店
    bookHotel() {
      if (!this.checkLogin()) return;
      
      uni.showToast({
        title: '正在跳转到预订页面',
        icon: 'none'
      });
      
      // 实际项目中跳转到预订页面
    },
    
    // 预订特定房型
    bookRoom(room) {
      if (!this.checkLogin()) return;
      
      uni.showToast({
        title: `正在预订${room.name}`,
        icon: 'none'
      });
      
      // 实际项目中跳转到对应房型的预订页面
    },
    
    // 打开地图
    openLocation() {
      uni.openLocation({
        latitude: 21.5846, // 这里使用虚构的经纬度，实际项目中使用真实数据
        longitude: 111.8627,
        name: this.hotel.name,
        address: this.hotel.address,
        scale: 18
      });
    },
    
    // 拨打电话
    makePhoneCall() {
      uni.makePhoneCall({
        phoneNumber: this.hotel.phone
      });
    },
    
    // 预览图片
    previewImage(images, current) {
      uni.previewImage({
        urls: images,
        current: images[current]
      });
    },
    
    // 查看更多评论
    viewMoreReviews() {
      // 实际项目中可跳转到更多评论页面
      uni.showToast({
        title: '查看更多评论',
        icon: 'none'
      });
    },
    
    // 检查登录状态
    checkLogin() {
      const userInfo = uni.getStorageSync('userInfo');
      if (!userInfo) {
        uni.showModal({
          title: '提示',
          content: '请先登录',
          success: (res) => {
            if (res.confirm) {
              uni.navigateTo({
                url: '/pages/login/index'
              });
            }
          }
        });
        return false;
      }
      return true;
    }
  },
  onShareAppMessage() {
    return {
      title: this.hotel.name,
      path: `/pages/hotels/detail?id=${this.hotelId}`,
      imageUrl: this.hotel.images[0]
    }
  },
  onShareTimeline() {
    return {
      title: this.hotel.name,
      query: `id=${this.hotelId}`,
      imageUrl: this.hotel.images[0]
    }
  }
}
</script>

<style>
.container {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding-bottom: 100rpx; /* 为底部交互栏留出空间 */
}

.loading-container, .error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.loading-image, .error-image {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 20rpx;
}

.loading-text, .error-text {
  font-size: 28rpx;
  color: #999;
}

.retry-btn {
  margin-top: 20rpx;
  background: #f0f0f0;
  color: #666;
  font-size: 28rpx;
  padding: 10rpx 30rpx;
  border-radius: 30rpx;
}

.hotel-banner {
  width: 100%;
  height: 450rpx;
}

.banner-image {
  width: 100%;
  height: 100%;
}

.hotel-info-container {
  margin-top: -40rpx;
  position: relative;
  z-index: 10;
  border-radius: 40rpx 40rpx 0 0;
  background-color: #fff;
  padding: 40rpx 30rpx 0;
  overflow: hidden;
}

.hotel-name-section {
  margin-bottom: 30rpx;
}

.hotel-name {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 15rpx;
  display: block;
}

.hotel-tags {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 15rpx;
}

.tag {
  font-size: 24rpx;
  color: #1296db;
  background-color: rgba(18, 150, 219, 0.1);
  padding: 8rpx 20rpx;
  border-radius: 20rpx;
  margin-right: 15rpx;
  margin-bottom: 10rpx;
}

.rating-row {
  display: flex;
  align-items: center;
}

.rating-score {
  font-size: 30rpx;
  font-weight: bold;
  color: #ff9500;
  margin-right: 10rpx;
}

.rating-desc {
  font-size: 24rpx;
  color: #ff9500;
  background-color: rgba(255, 149, 0, 0.1);
  padding: 4rpx 12rpx;
  border-radius: 6rpx;
  margin-right: 15rpx;
}

.review-count {
  font-size: 24rpx;
  color: #999;
}

.hotel-contact {
  background-color: #f9f9f9;
  border-radius: 12rpx;
  padding: 15rpx 20rpx;
  margin-bottom: 30rpx;
}

.contact-row {
  display: flex;
  align-items: center;
  padding: 15rpx 0;
}

.contact-row:not(:last-child) {
  border-bottom: 1rpx solid #eee;
}

.contact-icon {
  width: 36rpx;
  height: 36rpx;
  margin-right: 15rpx;
}

.contact-text {
  flex: 1;
  font-size: 28rpx;
  color: #333;
}

.action-text {
  font-size: 24rpx;
  color: #1296db;
  background-color: rgba(18, 150, 219, 0.1);
  padding: 6rpx 15rpx;
  border-radius: 20rpx;
}

.booking-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
  background-color: #fff5f5;
  padding: 20rpx;
  border-radius: 12rpx;
}

.price-info {
  display: flex;
  flex-direction: column;
}

.price-label {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 5rpx;
}

.price-value {
  font-size: 26rpx;
  color: #ff6b6b;
}

.price-num {
  font-size: 40rpx;
  font-weight: bold;
}

.booking-btn {
  background-color: #ff6b6b;
  color: #fff;
  font-size: 28rpx;
  padding: 0 30rpx;
  height: 70rpx;
  line-height: 70rpx;
  border-radius: 35rpx;
}

.section {
  margin-bottom: 30rpx;
  background-color: #fff;
  border-radius: 12rpx;
  overflow: hidden;
}

.section-header {
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  padding-left: 15rpx;
  border-left: 6rpx solid #1296db;
}

.section-content {
  padding: 20rpx 0;
}

.hotel-description {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
}

.facilities-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20rpx;
  padding: 10rpx 0;
}

.facility-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.facility-icon {
  width: 60rpx;
  height: 60rpx;
  margin-bottom: 10rpx;
}

.facility-name {
  font-size: 24rpx;
  color: #666;
}

.room-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.room-item {
  display: flex;
  border-bottom: 1rpx solid #f0f0f0;
  padding-bottom: 20rpx;
}

.room-item:last-child {
  border-bottom: none;
}

.room-image {
  width: 200rpx;
  height: 150rpx;
  border-radius: 8rpx;
  margin-right: 20rpx;
}

.room-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.room-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.room-size {
  font-size: 24rpx;
  color: #999;
  margin-bottom: 10rpx;
}

.room-features {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 15rpx;
}

.room-feature {
  font-size: 22rpx;
  color: #666;
  background-color: #f5f5f5;
  padding: 4rpx 10rpx;
  border-radius: 4rpx;
  margin-right: 10rpx;
  margin-bottom: 5rpx;
}

.room-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.room-price {
  font-size: 32rpx;
  color: #ff6b6b;
  font-weight: bold;
}

.room-book-btn {
  background-color: #ff6b6b;
  color: #fff;
  font-size: 24rpx;
  padding: 0 20rpx;
  height: 60rpx;
  line-height: 60rpx;
  border-radius: 30rpx;
}

.review-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.review-item {
  border-bottom: 1rpx solid #f0f0f0;
  padding-bottom: 20rpx;
}

.review-item:last-child {
  border-bottom: none;
}

.reviewer-info {
  display: flex;
  align-items: center;
  margin-bottom: 15rpx;
}

.reviewer-avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  margin-right: 15rpx;
}

.reviewer-details {
  flex: 1;
}

.reviewer-name {
  font-size: 26rpx;
  color: #333;
  margin-bottom: 5rpx;
  display: block;
}

.review-date {
  font-size: 22rpx;
  color: #999;
}

.review-rating {
  font-size: 28rpx;
  font-weight: bold;
  color: #ff9500;
}

.review-content {
  font-size: 26rpx;
  color: #333;
  line-height: 1.5;
  margin-bottom: 15rpx;
  display: block;
}

.review-images {
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
}

.review-image {
  width: 150rpx;
  height: 150rpx;
  border-radius: 8rpx;
}

.more-reviews {
  text-align: center;
  margin-top: 20rpx;
}

.more-reviews text {
  font-size: 26rpx;
  color: #1296db;
}

.bottom-space {
  height: 80rpx;
}

/* 底部互动栏 */
.fixed-interaction-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
  z-index: 100;
  padding: 0 30rpx;
  box-sizing: border-box;
}

.interaction-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-right: 40rpx;
}

.icon {
  width: 40rpx;
  height: 40rpx;
  margin-bottom: 5rpx;
}

.interaction-item text {
  font-size: 22rpx;
  color: #666;
}

.quick-book-btn {
  flex: 1;
  height: 70rpx;
  line-height: 70rpx;
  background-color: #ff6b6b;
  color: #fff;
  font-size: 28rpx;
  border-radius: 35rpx;
}
</style> 